<template>
	<view class="bg">
		<xl-navbar title="Button 按钮" fixed shadow></xl-navbar>
		<view class="content">
			<view class="title">基础样式</view>
			<xl-button text="默认按钮"></xl-button>
			<!-- 设置了高度，字体大小，则不会根据size改变高度和大小了，只有small和最小mini宽度依旧会限制 -->
			<view class="title">设置宽高、边距、字体颜色大小</view>
			<xl-button text="默认按钮" width="180rpx" height="40px" margin="10rpx 20rpx" textColor="#0a93ff" :fontSize="14"></xl-button>
			
			<!-- color设置背景颜色，若没有设置textColor，字体颜色默认不镂空为白色，镂空则用背景色 -->
			<view class="title">设置背景颜色、镂空</view>
			<view class="flex-around">
				<xl-button text="背景颜色" color="#0a93ff" :margin="[10,15]"></xl-button>
				<xl-button text="镂空按钮" color="#0a93ff" plain :margin="[10,15]"></xl-button>
				<xl-button text="渐变背景" color="linear-gradient(#93E0FF, #2B6BFF)" :margin="[10,15]"></xl-button>
			</view>
			
			<view class="title">设置按钮尺寸，设置size</view>
			<view class="flex-around">
				<xl-button text="超大按钮" size="large"></xl-button>
				<xl-button text="正常按钮" size="normal"></xl-button>
				<xl-button text="小型按钮" size="small"></xl-button>
				<xl-button text="超小按钮" size="mini"></xl-button>
			</view>
			
			<view class="title">设置按钮类型，设置type</view>
			<view class="flex-around">
				<xl-button text="主要按钮" type="primary"></xl-button>
				<xl-button text="错误按钮" type="error"></xl-button>
				<xl-button text="警告按钮" type="warning"></xl-button>
				<xl-button text="成功按钮" type="success"></xl-button>
			</view>
			
			<view class="title">设置按钮形状：默认square圆角，circle半圆</view>
			<xl-button text="主要按钮" type="primary" shape="circle"></xl-button>
			
			<view class="title">禁用按钮</view>
			<xl-button text="主要按钮" type="primary" shape="circle" disabled></xl-button>
			
			<view class="title">加载按钮，设置类型、大小</view>
			<view class="flex-around">
				<xl-button loading text="加载中" type="primary"></xl-button>
				<xl-button loading text="加载中" type="error" plain></xl-button>
				<xl-button loading text="加载中" :loadingSize="18" type="warning"></xl-button>
				<xl-button loading text="加载中" type="success" plain></xl-button>
			</view>
			<view class="flex-around" style="margin-top: 20px;">
				<xl-button loading loadingMode="hollowDots" type="primary"></xl-button>
				<xl-button loading text="加载中" loadingMode="rotateCircle" type="error"></xl-button>
				<xl-button loading text="加载中" loadingMode="chrysanthemum" :loadingSize="18" type="warning"></xl-button>
				<xl-button loading text="加载中" loadingMode="swappingSquares" type="success"></xl-button>
			</view>
			
			<view class="title">图标按钮</view>
			<view class="flex-around">
				<xl-button text="图标按钮" icon="xl-liuliang" type="primary"></xl-button>
				<xl-button text="图标按钮" icon="xl-qianbao" iconColor="#0a93ff"></xl-button>
			</view>
		</view>
	</view>
</template>

<script>
</script>
